<template>
  <view class="container">
    <video-player 
      :video-id="videoId" 
      :price="price"
      :preview-duration="previewDuration"
    />
	<view class="details">
		<view class="details_">详情</view>
		<view class="details2_">
			<view class="coursename">
				<view class="details_name">大合集</view>
				<view class="details_jinjie">简介  ></view>
			</view>
			<view class="table">
				<view
				v-for="(item, index) in tableitme"
				:key="index"
				class="tab-item">
					<view>
						<image :src="myicon" class="student_icon"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
  </view>
  
</template>

<script>
import VideoPlayer from '@/components/video-player.vue';

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      videoId: 'test_video_001', // 从页面参数获取
      price: 0.01, // 视频价格
      previewDuration: 30 ,// 试看时长30秒（测试用）
	  tableitme:[
		 {
		   image: '月度会员',
		   title: "点赞",
		 },
		 {
		   image: '月度会员',
		   title: "反馈问题",
		 },
		 {
		   image: '月度会员',
		   title: "课程附件",
		 },
		 {
		   image: '月度会员',
		   title: "分享",
		 },
	  ]
    };
  },
  onLoad(options) {
    if (options.videoId) {
      this.videoId = options.videoId;
    }
  }
};
</script>

<style scoped lang="scss">
	.container{
		.details{
			margin: 10px;
			.details_{
				font-size: 13px;
				color: #000;
				
			}
			.details2_{
				margin-top: 10px;
				.coursename{
					display: flex;
					flex-direction: row;
					.details_jinjie{
						margin-top: 5px;
						margin-left: 10px;
						font-size: 12px;
					}
				}
			   .table{
				   display: flex;
				   flex-direction: row;
				   justify-content: space-between;
				   align-items: center;
				   .tab-item{
					  
					 .student_icon{
					 	display: block;
					 	width: 25px;
					 	height: 25px;
					 	margin-left: 5px;
					 }
				   }
			   }	
			}
		}
	}
	
</style>